<template>
  <div class="boxContainer">
    <img class="leftArrow" src="/img/leftArrow.png" />
    <div class="info">
      <p class="infoTitle">
        空域名称：
        <span class="infoWord">{{ airspaceName }}</span>
      </p>
      <p class="infoTitle">
        限制高度：
        <span class="infoWord">{{ height }}</span>
      </p>
      <p class="infoTitle">
        时间范围：
        <span class="infoWord">{{ timeTitle }}</span>
      </p>
      <p class="infoTitle" style="display: flex;">
        相关文件：
        <div class="rightArrow">
          <div v-for="item in fileList" class="arrowData">
            <div class="filesAll">
              {{ item.fileName + item.fileExtension }}
            </div>
            <img src='/img/downLoad.png' @click="imgClick(item)" />
          </div>
        </div>
      </p>
    </div>
  </div>
</template>
<script setup>
import {reactive, ref} from "vue";
import {download} from "@/api/airSpace/enquiry";
const startTime = ref("");
const endTime = ref("");
const timeTitle = ref("");
const airspaceName = ref("");
const height = ref("");
const fileList = ref([]);
const getValue = (val) => {
  console.log("XXX", val)
  airspaceName.value = val.airspaceName;
  height.value = val.lowHeight + "～" + val.topHeight + "(米)";
  fileList.value = val.files;
  startTime.value = getTime(val.startTime);
  if (val.endTime !== "2999-12-12 23:59:59") {
    endTime.value = getTime(val.endTime);
  }
  if (val.endTime === "2999-12-12 23:59:59") {
    timeTitle.value = startTime.value + "起";
  } else {
    timeTitle.value = startTime.value + " ~ " + endTime.value;
  }
}

const imgClick = (val) => {
  console.log(val);
  download({ url: val.url }).then((response) => {
    console.log(response);
  });
}
// 格式化日期格式
function getTime(value) {
  // 计算日期相关值
  let time = new Date(value);
  let Y = time.getFullYear();
  let M = time.getMonth() + 1;
  let D = time.getDate();
  let h = time.getHours();
  let m = time.getMinutes();
  // let s = time.getSeconds();
  // let week = time.getDay();
  return (
      Y +
      "-" +
      (M < 10 ? "0" + M : M) +
      "-" +
      (D < 10 ? "0" + D : D) +
      " " +
      (h < 10 ? "0" + h : h) +
      ":" +
      (m < 10 ? "0" + m : m)
  );
}

defineExpose({
  getValue
})
</script>
<style>
.boxContainer{
  position: absolute;
  width: 270px;
  min-height: 120px;
  display: flex;
  .leftArrow{
    width: 28px;
    height: 37px;
    margin: 16% 2px 0 0;
  }
  .info{
    color: #2B333F;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    padding: 15px 20px;
    width:240px;
    border-radius:6px;
    font-size:12px;
    .infoTitle{
      margin:5px 0;
      line-height: 16.8px;
    }
    .infoWord{
      color: #A6A6A6;
    }

    .rightArrow{
      display: flex;
      flex-direction: column;
      width: 130px;

      .arrowData{
        color: #2BC17B;
        display: flex;
        justify-content: space-between;
      }

      .filesAll{
        width: 78%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>